<template>
	<view class="out-box">

		<!-- 上方bannar图 -->
		<view class="hader" v-show="hader_show == 1">
			<!-- 左侧联级展示 -->
			<view class="positioning">
				<view class="positioning_left"></view>
				<!-- <view class="positioning_right">{{ foundation_value.region == '' ? '全国': foundation_value.region }}</view> -->
				<picker mode="multiSelector" 
					:value="multiIndex" 
					:range="newAddressList" range-key="label"
					@change="pickerChange"
					@cancel="pickerCancel"
					@nodeclick="popupopened"
					@columnchange="pickerColumnchange">
						<span class="positioning_right">{{page_information.region != '不限'&&page_information.region != '' ? page_information.region : page_information.city }}</span>
				</picker>
			</view>	
			<!-- 右侧的搜索框 -->
			<view class="search_mian">
				<image class="cxtb" src="../../static/images/cxtb.png"></image>
			 	<view class="search">
					<uni-easyinput 
						:styles="inputstyles"
						:clearable='false'
						@focus="focus"
						:inputBorder="false"
						v-model="page_information.serach_value" 
						:placeholderStyle="placeholderStyle" 
						placeholder="搜索店铺信息" 
						>
					</uni-easyinput>
				</view>
				<view class="opensearch" @tap="iconClick">搜索</view>
			</view>
		</view>
		<!-- 滑动选择的框 -->
		<!-- <view class="whatShop" v-show="hader_show == 1">

			<view class="whatShop_mina">     
				<zb-tab shrink 
				:activeStyle="{
					fontWeight: 'bold',
					transform: 'scale(1.1)'
					}" 
					lineColor="#fff"
					:data="title_type" 
					v-model="active_title_type.value"
					@click-tab="tabClick">
				</zb-tab>
			</view>
		</view> -->
		<!-- 中间分类 -->
		<view class="nav" ref="scrollRef">
			<view class="nav_main">
				<view :class="display_store==1 ?'nav_main_item active' : 'nav_main_item'"  @tap="show_shop(1)">
					<view class="nav_main_item_span">店铺转让</view>
				</view>
				<view :class="display_store==2 ?'nav_main_item active' : 'nav_main_item'" @tap="show_shop(2)">
					<view class="nav_main_item_span">求租转让信息</view>
				</view>
			</view>
			<!-- 选择各种小类型 -->
			<view class="dropBown" v-show="display_store == 1">
<!-- 				<view :class="porpshow==1?'dropBownone active':'dropBownone'" @tap="click_type(1)">

					<uni-data-picker clear-icon="false"  placeholder="房源用途" 
						popup-title="请选择房源所属行业或原用途" :localdata="options"
						@change="onchange" >
					</uni-data-picker>
					<view class="dropBownone_right"></view>
				</view> -->
				<view :class="porpshow==2?'dropBownone active':'dropBownone'" @tap="click_type(2)">
					<view class="dropBownone_left">{{ search_son_selse.selse_area }}</view>
					<view class="dropBownone_right"></view>
				</view>
				<view :class="porpshow==3?'dropBownone active':'dropBownone'" @tap="click_type(3)">
					<view class="dropBownone_left">{{ search_son_selse.selse_rent }}</view>
					<view class="dropBownone_right"></view>
				</view>
			</view>
		</view>
		<!-- 最下方的数据展示 -->
		<view class="main">
			 <!-- 内容区域 -->
			<view class="main_lists" v-if="display_store == 1" ref="scrollContainer">

				<!-- 弹框遮罩层 -->
				<!-- <view class="shop_son_type" v-if="porpshow == 1">
					<view class="son_type_one">
						<view v-for="(item,index) in active_title_type.active.childList" :key="item.id">
							<view :class="item.id==select.active_type.id?'type_one_item active_son':'type_one_item'"
							@tap="onclicktype(item)" 
							>{{ item.name }}</view>
						</view>
					</view>
			
					<view class="son_type_two">
						<view class="type_two_let" @tap="close_type">取消</view>
						<view class="type_two_right" @tap="post_list">确定</view>
					</view>
					<view class="son_type_three" @tap="close_type"></view>
				</view> -->
				<view class="shop_son_type" v-if="porpshow == 2">
					<!-- 租金的列表 -->
					<view class="son_type_one">
						<view v-for="(item,index) in zhujin" :key="item.id">
							<view :class="item.id==select.active_money.id?'type_one_item active_son':'type_one_item'"
							@tap="onclickmoney(item)" 
							>{{item.name}}</view>
						</view>
					</view>
					<!-- 按钮 -->
					<view class="son_type_two">
						<view class="type_two_let" @tap="close_type">取消</view>
						<view class="type_two_right" @tap="post_list">确定</view>
					</view>
					<view class="son_type_three" @tap="close_type"></view>
				</view>
				<view class="shop_son_type" v-if="porpshow == 3">
					<!-- 面积的列表 -->
					<view class="son_type_one">
						<view v-for="(item,index) in mianji" :key="item.id">
							<view :class="item.id==select.active_area.id?'type_one_item active_son':'type_one_item'"
							@tap="onclickarea(item)" 
							>{{ item.name }}</view>
						</view>
					</view>
					<!-- 按钮 -->
					<view class="son_type_two">
						<view class="type_two_let" @tap="close_type">取消</view>
						<view class="type_two_right" @tap="post_list">确定</view>
					</view>
					<view class="son_type_three" @tap="close_type"></view>
				</view>
				<!-- 下方的列表 -->
				<view class="main_listone" style="z-index: 66;" v-if="page_information.shop_assemble == 0"></view>
				<scroll-view class="scroll-one" 
					v-if="page_information.shop_assemble != 0" 
					lower-threshold="10" scroll-y="true" 
					@scrolltolower="loadMore" @scroll="scroll">
					<view v-for="item,index in lists" :key="index">
						<view class="main_lists_item" v-if="item.id != 'null'" @tap="todetails(item)">
						<!-- 最上方置顶 -->
							<view class="Topping" v-if="item.is_expired == 0">置顶</view>
							<view class="item_left">
								<image class="item_left_img" :lazy-load="false" :src=item.cover_img></image>
								<view class="visits">
									<view class="visits_img"></view>
									<!-- item.exposure_count  -->
									<view class="visits_num">{{ item.exposure_count }}</view>
								</view>
							</view>
							<view class="item_right">
								<view class="item_right_one"><span v-if="item.is_swerve == 1" class="isspan">急转 | </span>{{item.title}}</view>
								<view class="item_right_two_big">
									<view class="item_right_two">{{item.city + '-'+item.county +' | ' + item.shop_area+"m²"}}</view>
									<view class="three_are"></view>
								</view>
								<view v-if="item.feature_label" class="item_right_identifying">
									<view  class="item_right_identifying_item" v-for="item1,index1 in item.feature_label.split(',')" :key="index1">
										<view v-show="item != null">{{ item1}}</view>
									</view>
								</view>
								<view class="item_right_three">
									<view class="three_money">{{ ( item.rent == '' || item.rent == null ||item.rent == '面议' || item.rent =='null') ? '面议': item.rent}}<span class="span1" v-if="item.rent !=null">元/月</span></view>
									<view class="three_time">更新于：{{item.update_time != null ? item.update_time : item.create_time}}</view>
								</view>
							</view>
						</view>
						<view v-else class="main_lists_item2" @tap="to_release_transfer('瀑布流进入')">
						  <image class="ad-item" />
						</view>
						
					</view>
					<!-- <view class="beian">
						<view class="beianone">昆山市银来互联网科技有限公司  提供服务</view>
						<view class="beianone">苏ICP备2021055833号-1</view>
					</view> -->
					<view class="show_Loading" v-show="page_information.showLoading">{{page_information.showtext}}</view>
				</scroll-view>	
			</view>

			<view class="main_listtwo" v-if="display_store == 2">
				<view class="main_twoif" v-if="page_information.rent_assemble == 0">
					<view class="img"></view>
				</view>
				<scroll-view v-if="page_information.rent_assemble != 0" 
				class="scroll-two" lower-threshold="10" scroll-y="true" 
				@scrolltolower="loadMoretwo"  @scroll="scrolltwo">
				<view v-for="item,index in listtwo" :key="index">
					<view class="lists_item" @tap="search(item)">
						<!-- 最上方置顶 -->
						<view class="Toppingtwo" v-if="item.is_expired == 0">置顶</view>
						<view class="item_left">
							<view class="item_left_one"><span v-if="item.is_swerve == 1" class="isspan">急租 | </span>{{ item.title }}</view>
							<view  class="item_right_identifying" v-if="item.feature_label != null && item.feature_label != ''">
								<view class="item_right_identifying_item" v-for="item1,index in item.feature_label.split(',')" :key="index">
									<view >{{ item1}}</view>
								</view>
							</view>
							<view class="item_left_two">联系人：{{ item.name }}</view>
							<view class="item_right_three">
								<view class="three_ipone">联系电话：{{item.phone}}</view>
								<view class="three_time">更新于:{{ item.update_time != null ? item.update_time : item.create_time  }}</view>
							</view>
							<view class="hrone"></view>
						</view>
					</view>
				</view>
				<!-- <view class="beian">
						<view class="beianone">昆山市银来互联网科技有限公司  提供服务</view>
						<view class="beianone">苏ICP备2021055833号-1</view>
				</view> -->
				<view class="show_Loading" v-show="page_information.showLoadingtwo">{{page_information.showtexttwo}}</view>
				</scroll-view>
			</view>
		</view>

	</view>
	<view class="tabbar">
		<view class="index_release" @tap="to_release()">{{page_information.release}}</view>
	</view>
		<!-- 普通弹窗 -->
		<uni-popup ref="popup" :is-mask-click="false">
			<!-- <view class="popupipone">
				<image class="popupipone_imgone" src="../../static/images/定位弹窗头部.png@3x.png"></image>
				<view class="popupipone_one">发布转让或找店信息</view>
				<view class="popupipone_two">商铺、厂房、摊位、仓库等转让出租信息发布</view>
				<view class="popupipone_three" @tap="to_release_transfer()">转让店铺发布</view>
				<view class="popupipone_four" @tap="to_release_hire()">找店信息发布</view>
				<image class="popupipone_imgtwo" @tap="colse_popup()" src="../../static/images/7.png"></image>
			</view> -->
			<view class="pupopimg" @tap="to_release_transfer()">
<!-- 				<view class="title">发布房源信息</view>
				<view class="time">最快<span class="span1">3天</span>可转出</view> -->
				<image class="colse" @tap.stop="colse_popup()" src="../../static/images/7.png"></image>
			</view>
		</uni-popup>
		<uni-popup ref="popup2" @maskClick="to_release_transfer">
			<view class="pupopimg" @tap="to_release_transfer()">
				<image class="colse" src="../../static/images/7.png"></image>
			</view>
		</uni-popup>
</template>
	
<script setup>
import areaData from '../../static/js/area-data1'
import {onGotApiData,addClick} from '../../util/api.js'
import {ref,reactive,onBeforeMount,onMounted,onUnmounted,watch} from 'vue'
// import { onPullDownRefresh } from '@dcloudio/uni-app';
import { options  } from '../../static/js/shop_type1.js';
import  INDEX from '../../static/js/config';
import { onLoad, onHide } from '@dcloudio/uni-app'
	// 从上个页面获取到参数
	const props = defineProps({
		channelNo: String,
	});
// 在组件渲染之前执行
onBeforeMount(() => {
	page_information.channel_no = uni.getStorageSync('channel_no') || '';
	if(page_information.channel_no == ''&&props.channelNo){
		page_information.channel_no = props.channelNo
		
		const url = window.location.href
		// 将 query 和 hash 都取出来
		const queryString = url.split('?')[1]?.split('#')[0] || '';
		const hashString = url.split('#')[1] || '';
			
		// 合并 query 和 hash 中的参数部分
		const fullParams = queryString + '&' + hashString;
			
		// 使用 URLSearchParams 来解析参数
		const params = new URLSearchParams(fullParams);
			
		page_information.channelNo = params.get('channelNo')
		
		uni.setStorageSync('channel_no', page_information.channelNo) || '';
		console.log("渠道号",page_information.channel_no)
	}
	page_information.link = uni.getStorageSync('link') || ''
	if(!page_information.link){
		page_information.link = encodeURI(window.location.href)
		uni.setStorageSync('link', page_information.link);
	}
	console.log('组件准备渲染',page_information.link );
	// page_information.look_num = uni.getStorageSync('look_num');
	// 首页基础数据
	foundation()
	// 首页店铺类型的接口
	home_type()
	// 进页面获取地址
	onpositioning()
	// 初始化地区的数组
	initAddress()
	// console.log("环境",process.env.NODE_ENV)
		// 过10秒之后打开弹窗
	// 设置一个定时器
	jsqtimer.fun = setInterval(()=>{
		jsqtimer.value ++
		console.log('jsqtimer.value',jsqtimer.value)
	},1000)
	
})
let jsqtimer = reactive({
	value:0,
	fun:null,
})

onHide(() => {
	  console.log('页面被隐藏，可能是跳转了',jsqtimer.value);
	if(jsqtimer.value){
		addClick('停留时间：首页',jsqtimer.value + 's')
		jsqtimer.value = 0
		clearInterval(jsqtimer.fun)
	}

})
// 在组件渲染完成后执行
onMounted(() => {
	// 进来立刻执行
	addClick('首页','首页访问')
	console.log('组件已经渲染完毕',INDEX.INDEX_time); 
	if(INDEX.ISSHOW_time){
		timer2.value = setTimeout(()=>{
				popup.value.open('center')
		},INDEX.INDEX_time2)
	}
	// 十五秒之后直接跳转发布页
	// timer2.value = setTimeout(()=>{
	// 	 page_information.indextoxq = '首页15s自动跳转进入'
	// 	to_release_transfer()
	// },INDEX.INDEX_time2)
});


// 申明一个定时器
let timer = ref(null)
let timer2 = ref(null)

// 本页面信息
let page_information = reactive({
	//从哪里跳转过去的
	indextoxq:'首页开屏7s弹窗进入',
	// 最新店铺的页数
	pageone:1,
	// 求租店铺的页数
	pagetwo:1,
	// 出租店铺上拉加载
	showLoading:false,
	// 求租店铺上拉加载
	showLoadingtwo:false,
	// 加载文字
	showtext:'加载更多店铺中...',
	// 加载文字
	showtexttwo:'加载更多店铺中...',
	// 店铺转让总条数
	shop_assemble:0,
	// 当前条数
	objectCount:null,
	// 求租总条数
	rent_assemble:0,
	// 当前条数
	rent_count:null,
	// 最下方发布转让
	release:'发布店铺转让信息',
	// 首页的落地页地址
	link:'',
	channel_no:'',
	// 获取到的地址
	address:"",
	// 访问详情次数
	look_num:0,
	// 展示定位的位置
	region:'不限',
	// 获取到的省市区
	province:'',
	city:'不限',
	district:'不限',
	// 商铺一级分类（传id）
	shop_first_type:1,
	// 商铺类型（中文）
	shop_type:'',
	shop_type_one:'',
	shop_type_two:'',
		// 租金
	rent:'',
	shop_area:'',
	// 搜索
	serach_value:'',
})
// 搜索框的样式
const inputstyles = reactive({
	color: '#FFFFFF',

})
const placeholderStyle = ref('color:rgba(255,255,255,0.6);font-size:24rpx;font-family: PingFang SC-Regular, PingFang SC;')
let inputvalue = ref('')
// 点击搜索图标
const iconClick = () =>{
	console.log('我是搜索框')
	
		// 每次点击别的区域都重置为1
	page_information.pageone = 1
	page_information.pagetwo = 1
	if(display_store.value == 1){
		// 调用转让店铺信息的接口
		lists_post()
	}else{
		// 调用求租店铺信息的接口
		listtwo_post()
	}
}
// 获取openid
const getappid = () => {
	let params = reactive({
		channel_no : page_information.channel_no,
		redirect_uri:page_information.link,
	})
	console.log("params",params)
	onGotApiData('/h5/api/app/gzh/get_appid','GET',params,getappid_value)
}
const getappid_value = (result) =>{
	console.log('获取appid',result)
		// // 跳转到微信授权页面
		window.location.href = result.redirect_uri;
}
// 获取openid
const getopenid = (code) =>{
	let params = reactive({
		code:code,
		channel_no : page_information.channel_no,
	})
	console.log("params",params)
	onGotApiData('/h5/api/app/gzh/get_openid','GET',params,getopenid_value)
}
const getopenid_value = (result) => {
	console.log('result',result)
	alert(result)
}
// 输入框获取焦点
const focus = () =>{
	// 关闭弹框
	porpshow.value = 0
} 

// 定义遮罩层的弹框初始值
const popup = ref(null)
const popup2 = ref(null)
// 打开手机号更改页面
const open = () =>{
	popup.value.open('center')
}
// 弹出20s之后的弹框
let tankuang20s = ref(false)
// 关闭遮罩层
const colse_popup = ()=>{
	console.log('首页弹框被关闭')
	popup.value.close()
	if(tankuang20s.value){
		return
	}
		
	tankuang20s.value = true
	timer.value = setTimeout(()=>{
		popup2.value.open('center')
		 page_information.indextoxq = '首页30s弹窗进入'
	},INDEX.INDEX_time)
	

}
// 跳转发布
const to_release_transfer = (val) =>{
		// 设置来源页面标记
		uni.setStorageSync('fromIndex',  true)

		clearInterval(timer.value);
		clearInterval(timer2.value);
		popup2.value.close()
	if(val){
		page_information.indextoxq = val
	}
	popup.value.close()
	uni.navigateTo({
		url: '/pages/release_transfer/release_transfer?PublishSource='+"1" + '&indextoxq=' +  page_information.indextoxq
	});
}
const to_release_hire = () =>{
	popup.value.close()
	uni.navigateTo({
		url: '/pages/release_hire/release_hire'
	});
}

// 控制展示列表的变量
const display_store = ref(1)
// 点击切换展示列表
const show_shop = (num)=>{
	// 关闭类型的弹框
	porpshow.value = 0
	// 每次点击别的地方都重置为0
	page_information.pageone = 1
	page_information.pagetwo = 1

	if(num == 0){
		page_information.release = "发布店铺转让信息"
		// addClick('H5最新店铺Tab')
	}else if(num == 1){
		page_information.release = "发布店铺转让信息"
		// addClick('首页')
			// 调用转让店铺信息的接口
			lists_post()

	}else if(num == 2){
		page_information.release = "发布店铺求租信息"
		// addClick('H5求租信息Tab')
			// 调用求租店铺信息的接口
			listtwo_post()
	}
	display_store.value = num
}
// 租金和面积的值
const zhujin = reactive([
	{id:'0',name:'不限'},
	{id:'1',name:'2000以下'},
	{id:'2',name:'2000-3000'},
	{id:'3',name:'3000-5000'},
	{id:'4',name:'5000-10000'},
	{id:'5',name:'10000以上'},
])
const mianji = reactive([
	{id:'0',name:'不限'},
	{id:'1',name:'小于50m²'},
	{id:'2',name:'50-200m²'},
	{id:'3',name:'200-600m²'},
	{id:'4',name:'600-800m²'},
	{id:'5',name:'800-1000m²'},
	{id:'6',name:'1000m²以上'},
])

// 点击内部的选择某一个值
let select = ref({
	active_type:{},
	active_money:{},
	active_area:{},

})

// 首页基础店铺数据类型
let title_type  = ref([])
let active_title_type = reactive({
	value:0,
	active:{}
})

// 店铺子选择类型的名称 
let search_son_selse = reactive({
	selse_shop:'店铺类型',
	selse_area:'租金',
	selse_rent:'面积',
})

// 链接选择器选择店铺的类型
const onchange = (e) =>{
		console.log('e1',e)
		// 先把原来的清空
		page_information.shop_type_one = ''
		page_information.shop_type_two = ''
		page_information.shop_type = ''


		page_information.shop_type_one = e.detail.value[0].text
		if(e.detail.value.length > 1){
			page_information.shop_type_two = e.detail.value[1].text ||''
		}
		if(e.detail.value.length > 2){
			page_information.shop_type = e.detail.value[2].text || ''
		}
		// 一级就选择不限
		if(e.detail.value[0].text == "不限"){
			page_information.shop_type_one = '不限'
			page_information.shop_type_two = '不限'
			page_information.shop_type = '不限'
		}
		// 查询装让店铺接口
		lists_post()
	}
// 首页基础店铺数据类型的接口
const home_type = () =>{
	let params = reactive({
		type : 1
	})
	console.log("params",params)
	onGotApiData('/api/app/other/type_list','GET',params,home_type_value)
}
// 首页基础店铺数据类型的结果
const home_type_value = (result) => {
	result.forEach((value,index,Array)=>{
		if(value.childList){
			Array[index].childList = JSON.parse(value.childList)
		}
	})
	console.log('首页基础数据类型的接口',result)
	title_type.value = result
	// 下方小横款选中的值
	active_title_type.value = 1;
	active_title_type.active = result[0]
	page_information.shop_first_type = active_title_type.active.id
	// 子类型的初始选择值
	// select.value.active_type = active_title_type.active.childList[0] 
	// select.value.active_money = zhujin[0] 
 	// select.value.active_area = mianji[0] 
	// console.log('子类型的初始值',select.value.active_money.id)
	console.log("我首页店铺类型选中的值",active_title_type.active)
	// 调用初始转让列表(获取到店铺大id)
	// if(page_information.city != ''){
	// 	lists_post()
	// }

}
// 店铺类型的上方点击事件
const tabClick = (item) =>{
	console.log('当前点击选中的值', item)
	// 展示弹框的时候用
	active_title_type.active = item
	page_information.shop_first_type = active_title_type.active.id
	// 点击上方的某一个大类型的时候值清空
	select.value.active_type = {}
	select.value.active_money = {}
	select.value.active_area = {}
	page_information.shop_type = ''
	page_information.rent = ''
	page_information.shop_area = ''
	search_son_selse.selse_shop = '店铺类型'
	search_son_selse.selse_area = '租金'
	search_son_selse.selse_rent = '面积'
	if(display_store.value == 1){
		// 调用转让店铺信息的接口
		lists_post()
	}else if(display_store.value == 2){
		// 调用求租店铺信息的接口
		listtwo_post()
	}
}
// 点击下方的店铺子类型选择
const onclicktype = (item) =>{
			// 每次点击别的区域都重置为1
	page_information.pageone = 1
	page_information.pagetwo = 1

	// 选中子类型的某一个对象
	select.value.active_type  = item
	page_information.shop_type =  item.name
	search_son_selse.selse_shop = item.name
}
// 点击下方的金额选择
const onclickmoney = (item) =>{
		// 每次点击别的区域都重置为1
		page_information.pageone = 1
	page_information.pagetwo = 1

	select.value.active_money = item
	page_information.rent = item.id
	search_son_selse.selse_area = item.name

}
//点店铺的选择
const onclickarea = (item) =>{
	// 每次点击别的区域都重置为1
	page_information.pageone = 1
	page_information.pagetwo = 1

	select.value.active_area = item
	page_information.shop_area = item.id
	search_son_selse.selse_rent = item.name
}
// 滑动模块
const scrollRef = ref(null)

// 最初的展示值
let porpshow = ref(0)
// 点击展示类型还是面积金额
const click_type = (value) =>{
	// scrollRef.scrollTop= 999;
	console.log('我是点击事件',value)
	porpshow.value = value
	// scrollToBottom();
	// 点击两次就取消
	// if(porpshow.value = value){
	// 	porpshow.value = 0
	// }
}

// 点击弹框取消按钮
const close_type = () => {
	porpshow.value = 0
}

const post_list = () =>{
	porpshow.value = 0
	// 调用初始转让列表(获取到店铺大id)
	lists_post()
} 
// 首页基础数据接口
let foundation_value = reactive({
	total_user:0,
	yesterday_user:0,
	total_transfer:0,
	yesterday_transfer:0,
	total_rent:0,
	yesterday_rent:0,

});
// 首页基础数据接口
const foundation = () =>{
	let params = reactive({
		channel_no : page_information.channel_no
	})
	console.log("params",params)
	onGotApiData('/api/app/home/base_data','GET',params,foundation_num)
} 
// 首页基础数据接口的结果
const foundation_num = (result) => {
	console.log('首页基础数据接口的结果',result)
	foundation_value.total_user = result.total_user
	foundation_value.yesterday_user = result.yesterday_user
	foundation_value.total_transfer = result.total_transfer
	foundation_value.yesterday_transfer = result.yesterday_transfer
	foundation_value.total_rent = result.total_rent
	foundation_value.total_usyesterday_renter = result.yesterday_rent
	// page_information.region = result.region
	// page_information.city = result.region
	if( page_information.city == '不限'&&page_information.region =='不限'){
		page_information.district = result.region
		page_information.region = result.region
		page_information.city = result.city
		console.log('地址',)
		// 调用初始转让列表
		lists_post()
	}
}

// 店铺地址全部
const oldAddressList = reactive(areaData)
const newAddressList = reactive([
	[],
	[],
	[]
])
// 最后显示的值
const addressList = reactive(['北京市', '北京市', '东城区'])
const tempAddressList = reactive([])
// 列表中的值
const multiIndex = reactive([])

	// 取消时候触发的
const initMultiIndex = () => {
	console.log('我是取消时触发嘛')

	if (!addressList) {
		multiIndex[0] = 0;
		multiIndex[1] = 0;
		multiIndex[2] = 0;
		return;
	}
	const province = addressList[0];
	const city = addressList[1];
	const area = addressList[2];

	const provinceObj = oldAddressList.find(item => item.label === province);
	const provinceIndex = oldAddressList.findIndex(item => item.label === province);

	console.log(provinceObj)
	const cityObj = provinceObj.children.find(item => item.label === city);
	const cityIndex = provinceObj.children.findIndex(item => item.label === city);

	const areaObj = cityObj.children.find(item => item.label === area);
	const areaIndex = cityObj.children.findIndex(item => item.label === area);

	multiIndex[0] = provinceIndex
	multiIndex[1] = cityIndex
	multiIndex[2] = areaIndex
	console.log(multiIndex)

}

// 把js中的数据遍历到这个数组上去
const initAddress = () => {
	initMultiIndex();

	newAddressList[0] = oldAddressList.map((item, index) => {
		var obj = {
			label: item.label,
			value: item.value
		}
		return obj
	})
	newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item, index) => {
		var obj = {
			label: item.label,
			value: item.value
		}
		return obj
	})
	newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]].children.map(
		(item, index) => {
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})

	console.log('newAddressList:', newAddressList);

}

	// value值改变时候触发（点击确认的时候）
const pickerChange = (e) => {
		// 关闭弹框
		porpshow.value = 0
	console.log('pickerChange:', e.detail.value);
	const [provinceIndex, cityIndex, areaIndex] = e.detail.value;
	const province = newAddressList[0][provinceIndex].label;
	const city = newAddressList[1][cityIndex].label;
	const area = newAddressList[2][areaIndex].label;
	console.log(province + '-' + city + '-' + area);
	// page_information.province = province
	// page_information.city = city
	page_information.city = city
	page_information.region = area
	addressList[0] = province
	addressList[1] = city
	addressList[2] = area

	// 切换之后换个详细地址
	baseFormData.detail_address = province + city + area
	
	uni.setStorageSync('formatted_address',baseFormData.detail_address)
				// 做缓存发布时候用
	uni.setStorageSync('province', province);
	uni.setStorageSync('city',city);
	uni.setStorageSync('district',area);
	console.log('我现在的值是',display_store.value)

		// 每次点击别的区域都重置为1
	page_information.pageone = 1
	page_information.pagetwo = 1

	if(display_store.value == 1){
		// 调用转让店铺信息的接口
		lists_post()
	}else{
		// 调用求租店铺信息的接口
		listtwo_post()
	}
}

// 某一列值改变时候触发
const pickerColumnchange = (e) => {
	console.log('pickerColumnchange:', e);
	// 第几列滑动
	// console.log(e.detail.column);
	// 第几列滑动的下标
	// console.log(e.detail.value)
	// 第一列滑动
	if (e.detail.column === 0) {
		multiIndex[0] = e.detail.value;

		newAddressList[1] = oldAddressList[multiIndex[0]].children.map((item,
			index) => {
			// console.log('item:',item);
			var obj = {
				label: item.label,
				value: item.value
			}
			return obj
		})
		multiIndex[1] = 0
		multiIndex[2] = 0;
		newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]].children.map((item, index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})

	}else if (e.detail.column === 1) {
		multiIndex[1] = e.detail.value
		multiIndex[2] = 0;
		newAddressList[2] = oldAddressList[multiIndex[0]].children[multiIndex[1]].children.map((item, index) => {
				// console.log('item:',item);
				var obj = {
					label: item.label,
					value: item.value
				}
				return obj
			})

	}else if (e.detail.column === 2) {
		multiIndex[2] = e.detail.value
	}
}
	// 节点被触发
const popupopened = () =>{
	console.log('弹出一触发？')
}

// 取消时候触发
const pickerCancel = () => {
		// 关闭弹框
		porpshow.value = 0
	initMultiIndex();
}

// 最新店鋪列表
let lists = ref([]);
// const insertIndexes = [2, 12, 32]; // 插入广告的位置（索引为 0 起点）

// // 用于存储处理后的数据
// let processedList = ref([]);

// // 使用 watch 监听 lists 的变化，并深度监听内部元素改变
// watch(
//   () => lists.value,
//   (newVal) => {
//     console.log('lists 内容发生变化:', newVal)

//     // 处理插广告逻辑
//     const result = newVal.reduce((acc, item, index) => {
//       if (insertIndexes.includes(index)) {
//         acc.push({ id: 'null', isAd: true }) // 插入广告
//       }
//       acc.push(item)
//       return acc
//     }, [])

//     // 更新最终显示的列表（注意：processedList 是一个新的 ref）
//     lists.value = result
//     console.log('插入广告后的列表:', lists.value)
//   },
//   { deep: true, immediate: true }
// )


	// 最新店鋪列表接口
const lists_post = () =>{
	let params = reactive({
		page : page_information.pageone,
		size: 10,
		// region:page_information.region
		region:page_information.region,
		city:page_information.city,
		shop_first_type:page_information.shop_first_type,
		// 商铺类型（中文）
		shop_type:page_information.shop_type,
		// 租金
		rent:page_information.rent,
		shop_area:page_information.shop_area,
		// 搜索
		serach_value:page_information.serach_value,
		shop_type_one:page_information.shop_type_one,
		shop_type_two:page_information.shop_type_two,
	})
	console.log("params",params)
	onGotApiData('/api/app/shop_transfer/v3/page_list','GET',params,lists_value)
}
// 会员页面产品请求的结果
const lists_value = (result) => {
	lists.value = result.list
	lists.value  = lists.value.reduce((acc, item, index) => {
	//   // 每隔 3 位插入一个广告对象
	  if (index==2) {
	    acc.push({ id: 'null' });
	  }
	  acc.push(item);
	  return acc;
	}, []);
	
	
	// 总条数
	page_information.shop_assemble = result.total
	console.log('lists_value请',result.total)
	console.log('lists_value请求成功',lists)
			// 替换空白页面
	display_store.value = 1
	page_information.showtext ='加载更多店铺中...'
	// 下滑中,展示上方
	hader_show.value = 1
		// if(result.total == 0){
			// display_store.value = 0
			// page_information.showtext ='加载更多店铺中...'
		// }
}

// 最新求租店鋪列表
let listtwo = ref([]);
const listtwo_post = () =>{
	let params = reactive({
		page : page_information.pagetwo,
		size: 10,
		// region:page_information.region
		region:page_information.region,
		city:page_information.city,
				// 搜索
		serach_value:page_information.serach_value,
	})
	console.log("params",params)
	onGotApiData('/api/app/shop_rent/page_list_v1','GET',params,listtwo_value)
}
// 最新求租店铺请求的结果
const listtwo_value = (result) => {
		// 总条数
	page_information.rent_assemble = result.total
	console.log("我是界面",page_information.rent_assemble)
	listtwo.value = result.list
	console.log('listtwo_value请求成功',listtwo.value)
	display_store.value = 2
	page_information.showtexttwo = '加载更多店铺中...'
	// 下滑中,展示上方
	hader_show.value = 1
	// if(result.total == 0){
		// display_store.value = 0
	// }
}

// 点击下方跳转发布
const to_release = () =>{

		// 设置来源页面标记
		uni.setStorageSync('fromIndex',  true)
	  clearInterval(timer.value)
	  clearInterval(timer2.value)
		// 关闭类型的弹框
		porpshow.value = 0

		if(display_store.value == 0){
			addClick('首页','发布转租按钮')
			uni.navigateTo({
				url: '/pages/release_transfer/release_transfer?PublishSource='+"2" + '&indextoxq=' + '首页底部按钮进入'
			});
		}else if(display_store.value == 1){
			addClick('首页','发布转租按钮')
			uni.navigateTo({
				url: '/pages/release_transfer/release_transfer?PublishSource='+"2" + '&indextoxq=' + '首页底部按钮进入'
			});
		}
		else if(display_store.value == 2){
			addClick('首页','发布求租按钮')
			uni.navigateTo({
				url: '/pages/release_hire/release_hire'
			});
		}
}

let hader_show = ref(1)
let scroll_value = ref(0)
let scrolltwo_value = ref(0)
// 滚动条滚动时候触发
const scroll =(e)=>{
	// console.log('滚动条的值',e.detail.scrollTop)
	if((e.detail.scrollTop - scroll_value.value) > 8){
		// 上划中，隐藏上方
		hader_show.value = 0
	}else if((scroll_value.value -e.detail.scrollTop) > 20){
		// 下滑中,展示上方
		hader_show.value = 1
	}
	// 赋值
	scroll_value.value = e.detail.scrollTop
}
// 滚动条滚动时候触发
const scrolltwo =(e)=>{
	// console.log('滚动条的值',e.detail.scrollTop)
	if((e.detail.scrollTop - scrolltwo_value.value) > 10){
		// 上划中，隐藏上方
		hader_show.value = 0
	}else if((scrolltwo_value.value -e.detail.scrollTop) > 20){
		// 下滑中,展示上方
		hader_show.value = 1
	}
	// 赋值
	scrolltwo_value.value = e.detail.scrollTop
}


	// 转让店铺上拉加载
const loadMore = () => {
      // 判断是否正在加载中，避免重复触发加载
      if (page_information.showLoading) {
        return;
      }
	     // 显示加载中提示
      page_information.showLoading = true
	//   计算当前数组有多少对象
	  page_information.objectCount = lists.value.filter(item => typeof item === 'object').length;
	//   如果已加载全部直接返回
	  if( page_information.objectCount >= page_information.shop_assemble){
		console.log("比较",page_information.objectCount,page_information.shop_assemble)
		page_information.showtext = '没有更多数据了...'
			setTimeout(()=>{
					// 隐藏加载中提示
					page_information.showLoading = false; 
			},2000)
		return
	  }

	//   每次请求页数+1
	  page_information.pageone = page_information.pageone + 1
      // 模拟异步请求数据
      setTimeout(function(){
        // 获取到的新数据
		let params = reactive({
			page : page_information.pageone,
			size: 10,
			// region:page_information.region
			region:page_information.region,
			city:page_information.city,
					// 商铺一级分类（传id）
			shop_first_type:page_information.shop_first_type,
			// 商铺类型（中文）
			shop_type:page_information.shop_type,
			// 租金
			rent:page_information.rent,
			shop_area:page_information.shop_area,
			// 搜索
			serach_value:page_information.serach_value,
		})
		console.log("params",params)
		onGotApiData('/api/app/shop_transfer/v3/page_list','GET',params,goto_lists)

        // 将新数据追加到数据列表中
      }, 1000);
		// 会员页面产品请求的结果
		const goto_lists = (result) => {
			console.log('分页列表',result)
			lists.value.push(...result.list)
			console.log('goto_lists请求成功',lists.value)
			
			if(page_information.pageone == 2){
				lists.value  = lists.value.reduce((acc, item, index) => {
				//   // 每隔 3 位插入一个广告对象
				  if (index==12) {
				    acc.push({ id: 'null' });
				  }
				  acc.push(item);
				  return acc;
				}, []);
			}
			if(page_information.pageone == 4){
				lists.value  = lists.value.reduce((acc, item, index) => {
				//   // 每隔 3 位插入一个广告对象
				  if (index==32) {
				    acc.push({ id: 'null' });
				  }
				  acc.push(item);
				  return acc;
				}, []);
			}
			// 隐藏加载中提示
			page_information.showLoading = false; 
			
		}
	}
	// 求租店铺上拉加载
const loadMoretwo = () =>{
		// 判断是否正在加载中，避免重复触发加载
		if (page_information.showLoadingtwo) {
			return;
		}
		// 显示加载中提示
	page_information.showLoadingtwo = true
	//   计算当前数组有多少对象
	page_information.rent_count = listtwo.value.filter(item => typeof item === 'object').length;
	//   如果已加载全部直接返回
	if( page_information.rent_count >= page_information.rent_assemble){
		// console.log("比较",page_information.rent_count,page_information.rent_assemble)
		page_information.showtexttwo = '没有更多数据了...'
			setTimeout(()=>{
					// 隐藏加载中提示
					page_information.showLoadingtwo = false; 
			},2000)
		return
	}
	//   每次请求页数+1
	page_information.pagetwo = page_information.pagetwo + 1
	// 模拟异步请求数据
	setTimeout(function(){
		// 获取到的新数据
		let params = reactive({
			page : page_information.pagetwo,
			size: 10,
			// region:page_information.region
			region:page_information.region,
			city:page_information.city,
					// 搜索
			serach_value:page_information.serach_value,
		})
		console.log("params",params)
		onGotApiData('/api/app/shop_rent/page_list_v1','GET',params,goto_listtwo)

		// 将新数据追加到数据列表中
	}, 1000);
		// 会员页面产品请求的结果
		const goto_listtwo = (result) => {
			console.log('分页列表',result)
			listtwo.value.push(...result.list)
			console.log('goto_listtwo请求成功',listtwo.value)
			// 隐藏加载中提示
			page_information.showLoadingtwo = false; 
		}
}
// 点击转让店铺详情
const todetails = (item) =>{

	clearInterval(timer.value);
	clearInterval(timer2.value);
	console.log("id",item.id)
	// let obj = JSON.stringify(item)
	// uni.navigateTo({
	// 	url: '/pages/transfer/transfer?obj=' + encodeURIComponent(obj),
	// });
	// 判断用了几次
	// if(page_information.look_num >= 3){
	// // 超过三次直接跳转到小程序
	// 	towx()
	// }else{

	// }	
	
	uni.navigateTo({
			url: '/pages/transfer/transfer?id=' + `${item.id}`,
		});
}
// 点击查询店铺
const search = (item) =>{
	clearInterval(timer.value);
	console.log("id",item.id)
	// let obj = JSON.stringify(item)
	// uni.navigateTo({
	// 	url: '/pages/search_shop/search_shop?obj=' + encodeURIComponent(obj),
	// });
	// if(page_information.look_num >= 3){
	// // 超过三次直接跳转到小程序
	// 	towx()
	// }else{

	// }

	uni.navigateTo({
		url: '/pages/search_shop/search_shop?id=' + `${item.id}`,
	});
} 
// 跳转到小程序
const towx = () =>{
	let params = reactive({
		link :  page_information.link ,
		env_version: 'release'
	})
	console.log("params",params)
	onGotApiData('/api/app/xcx/jump_xcx','GET',params,towx_value)
}
// 返回的结果
const towx_value =(result) =>{
	window.location.href = result.openlink
}
	
// 点击定位
const onpositioning = () =>{
	uni.getLocation({
		type: 'gcj02',
		success: function(res) {
			const latitude = res.latitude; // 纬度
			const longitude = res.longitude; // 经度
			console.log("经度1",longitude)
			console.log("纬度2",latitude)
			// 在这里可以根据获取到的定位信息进行相应的处理
			map(latitude,longitude)
			// 将经纬度缓存
			uni.setStorageSync('longitude',JSON.stringify(longitude))
			uni.setStorageSync('latitude', JSON.stringify(latitude))
		},
		fail: function(err) {
			console.log('获取定位失败', err);
			// 调用转让店铺信息的接口
			lists_post()
		}
	});
}	

const map = (latitude,longitude) => {
	const location_value = '' + longitude + ',' + latitude
	// page_information.serach_value =location_value
	// wx.request({
	//       url: 'https://restapi.amap.com/v3/geocode/regeo',
	//       data: {	
	//         key: '5bf3cf7e402cc6aa97c67e1068838364',
	//         location: '121.45088, 31.25145'
	//       },
	//       success: (res) => {    
	// 		console.log('res',res)
	// 	}
	// })
	// return	
	let params = reactive({	
		link :  page_information.link ,
		// link : 'https://shop-h5.shiying1258.cn/shop/index.html#/?channelNo=SY_PPZ_V4_1001&projectid=123123' ,
		location:location_value,
		// location: '121.45088, 31.25145'
	})
	
	console.log("params",params)
	onGotApiData('/api/app/other/gaode_geo','GET',params,map_value)
	// 统计一下地理编码那
	addClick('首页','逆地理编码')
				
}
const map_value = (res) =>{
	console.log("首页定位地图返回的全部",res);
		// 返回的是空
	if(res.city == [] || res.city == ''){
		return
	}
	
	uni.setStorageSync('pois',JSON.stringify(res.pois)) 
	 
	 // 完整的地址
	let address = ''
	if(res.number){
		address = res.province + res.city + res.district +res.township + res.street + res.number
	}else{
		address = res.province + res.city + res.district +res.township 
	}
	uni.setStorageSync('formatted_address',address)
	// 省市区（为了传给发布页）
	page_information.province = res.province
	page_information.city = res.city

		// 获取到的区，下面也有
	page_information.district = res.district
	page_information.region = res.district


	// 做缓存发布时候用
	uni.setStorageSync('province', page_information.province);
	uni.setStorageSync('city', page_information.city);
	uni.setStorageSync('district',page_information.district);
	uni.setStorageSync('township',res.township);
		// 每次点击别的区域都重置为1
	page_information.pageone = 1
	page_information.pagetwo = 1
	if(display_store.value == 1){
	// 调用转让店铺信息的接口
		lists_post()
	}else if(display_store.value == 2){
		// 调用求租店铺信息的接口
		listtwo_post()
	}
	
}
</script>

<style lang="scss" scoped>
	.out-box {
		min-height: 100vh;
		width: 100vw;
		max-width: 750rpx;
		margin: 0 auto;
		overflow: hidden;
		font-family: '思源黑体';
		background: linear-gradient(to bottom, #005CF1, #FFFFFF) no-repeat;
		// background-position: top;
		background-size: 100% 40%;
		width: 750rpx auto;
		.hader{
			width: 100%;
			height: 110rpx;
			text-align: center;
			font-family: Arial, Helvetica, sans-serif;
			font-weight: 600;
			color: #F5F5F5;
			position:relative;
			// background: linear-gradient(to bottom,rgb(255,115,66),rgb(255,193,172));	
			// background: url(../../static/images/banner.png);
			// background-size: 100% 100%;
			display: flex;
			// justify-content: space-around;
	
			// 左边联级选择器
			.positioning{
				width: 200rpx;
				height:60rpx;
				position: absolute;
				top: 30rpx;
				left: 0rpx;
				overflow: hidden;
				// 超出出现省略号
				text-overflow: ellipsis;
				// border: 1px solid black;
				// background: rgba(204, 204, 204, 0.2);
				color: #F5F5F5;
				// border-radius:28rpx;
				// display: flex;
				text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				.positioning_left{
					width: 22rpx;
					height: 28rpx;
					background: url(../../static/images/定位1.png);
					background-size: 100% 100%;
					position: absolute;
					// margin: 8rpx 0 0 4rpx;
					top: 16rpx;
					left: 14rpx;
				}
				.positioning_right{
					width: 150rpx;
					height: 54rpx;
					position: absolute;
					// margin: 8rpx 0 0 4rpx;
					top: 0rpx;
					left: 44rpx;
					// padding:  0 18rpx 0 2rpx;
					line-height:60rpx;
					text-align: left;
					font-size: 34rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
			}
			// 输入框 
			.search_mian{
				width: 520rpx;
				height: 60rpx;
				background-color: rgb(165,197,251);
				border-radius: 16rpx;
				position: absolute;
				top: 30rpx;
				left: 210rpx;
				display: flex;
				.cxtb{
					width: 22rpx;
					height: 22rpx;
					margin: 19rpx 0 19rpx 19rpx;
				}
				.search{
					width: 370rpx;
					// margin-top: 2rpx;
					:deep(.uni-easyinput__content-input){
						// background-color: transparent;
						height: 60rpx;
						color: #fff;
						font-size: 26rpx;
					}
				}
				.opensearch{
					width: 90rpx;
					height: 44rpx;
					margin: 8rpx;
					line-height: 44rpx;
					font-size: 32rpx;
					background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
					border-radius: 8rpx;
					font-size: 24rpx;
				}
			}


		}
		.whatShop{
			// width: 700rpx;
			height: 70rpx;  
			// border: 1px solid black;
			margin: 0 auto;
			margin-bottom: 30rpx;
			font-size: 34rpx;
			color: #FFFFFF;

			.whatShop_mina{
				width: 710rpx;
				margin-left: 20rpx;
				:deep(.zb-tabs__nav_inner){
					width: 580rpx;
					margin: 0 auto;
					background-color:transparent;
				}
				:deep(.zb-tab){
					color: #F0F0F0;
					font-size: 32rpx;
				}
				:deep(.zb-tab--shrink){
					padding: 0 32rpx;
					// margin: 0 10rpx;
				}
				// :deep(.zb-tabs__line){
				// 	background: #F0F0F0;
				// }
			}
		}
		// 上方三个导航栏
		.nav{
			width: 720rpx;
			margin: 0 auto;
			margin-top: 10rpx;
			background-color: #FFFFFF;
			border: 1px solid #fff;
			font-family: PingFang SC-Medium, PingFang SC;
			border-radius: 20rpx 20rpx 0 0;
			.nav_main{
				width: 650rpx;
				height: 76rpx;
				background-color: #F6F7FB;
				// background: linear-gradient(180deg, rgba(255, 85, 0, 1) 0%, rgba(250, 145, 85, 1) 100%);
				// box-shadow: 0px 2px 4px  rgba(0, 0, 0, 0.25);
				margin: 0 auto;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				padding: 10rpx;
				border-radius: 20rpx;
				font-size: 28rpx;
				font-weight: 500;
				display: flex;
				justify-content:space-around;
				.nav_main_item{
					width: 330rpx;
					height: 76rpx;
					text-align: center;
					color: #000000;
					border-radius: 16rpx;
				
					.nav_main_item_span{
						font-weight: 600;
						line-height: 70rpx;
					}
					.nav_item_bottom{
						margin-top: 6rpx;
						line-height: 20px;
						font-size: 12px;
						font-weight: 400;
					}
				}
				.active{
					background-color: #fff ;
					color: #005CF1;
					// border-radius: 80rpx;
					box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);
				}
			}
			// 下拉的选择框
			.dropBown{
				width: 680rpx;
				height: 50rpx;
				margin: 0 auto;
				// padding-right: 30rpx;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: space-around;
				position: relative;
				.dropBownone{
					// width: 220rpx;
					height: 50rpx;
					display: flex;
					justify-content: space-around;
					font-weight: 400;
					color: #000000;
					:deep(.input-value-border){
						border: none;
					}
					:deep(.input-value){
						margin-top: -10rpx;
						font-size: 28rpx;
						padding-left: 0;
						color: #000000;
					}
					:deep(.arrow-area){
						display: none;
					}
					:deep(.uni-icons){
						display: none;
					}
					:deep(.placeholder){
						color: #000000;
					}
					.dropBownone_left{
						// width: 184rpx;
						height: 50rpx;
						line-height: 50rpx;
						font-size: 24rpx;
						text-align: center;
						font-family: PingFang SC-Regular, PingFang SC;
						overflow: hidden;
					}
					.dropBownone_right{
						margin: 14rpx 0 0 6rpx;
						width: 20rpx;
						height: 20rpx;
						// background-color: #F50909;
						background: url(../../static/images/上箭头.png);
						background-size: 100% 100%;
					}
				}
				.active{
					.dropBownone_left{
						color: #005CF1;
					}
					.dropBownone_right{
						margin: 14rpx 0 0 6rpx;
						width: 20rpx;
						height: 20rpx;
						background: url(../../static/images/下箭头.png);
						background-size: 100% 100%;
					}
				}
			}
		}

		// 中间的内容
		.main{
			width: 100%;
			margin-bottom: 120rpx;
			// min-height: 60vh;
			
			font-family: '思源黑体';
			display: flex;
			justify-content: center;
			border-radius: 0 0 20rpx 20rpx;

			.main_lists{
				width: 720rpx;
				// height: 100rpx;
				// background-color: pink;
				background-color: #FFFFFF;
				border: 1px solid #fff;
				border-radius:  0 0 20rpx 20rpx;
				position: relative;
				.main_listone{
					width: 720rpx;
					height: calc(100vh - 350rpx);
					background: url(../../static/images/kongbai3.png) no-repeat;
					background-size: 100%;
					border-radius:  0 0 20rpx 20rpx;
					// z-index: 88;
				}
				.shop_son_type{
					position: absolute;
					width: 720rpx;
					background-color: rgba(0, 0, 0, 0.6);
					height: calc(100vh - 350rpx);
					z-index: 99;
					.son_type_one{
						width: 720rpx;
						padding-top: 10rpx;
						display: flex;
						flex-wrap: wrap;
						// justify-content: space-around;
						align-items: flex-start;
						background-color: #FFFFFF;
						.type_one_item{
							width: 200rpx;
							height: 50rpx;
							font-size: 24rpx;
							line-height: 50rpx;
							margin: 4rpx 0 10rpx 30rpx;
							text-align: center;
							border-radius: 10rpx;
							color: rgb(97, 96, 96);
							background-color: rgb(235, 235, 235);
						}
						.active_son{
							color: #005CF1 ;
							background-color: rgb(223, 227, 246);
						}
					}
					.son_type_two{
						width: 720rpx;
						height: 80rpx;
						padding-top: 30rpx;
						font-size: 28rpx;
						text-align: center;
						background-color: #FFFFFF;
						display: flex;
						justify-content: space-around;
						.type_two_let{
							width: 240rpx;
							height: 60rpx;
							background-color:rgba(229, 229, 229, 1);
							border-radius: 10rpx;
							line-height: 60rpx;
							color: rgba(0, 0, 0, 1);
						}
						.type_two_right{
							width: 240rpx;
							height: 60rpx;
							background-color: #005CF1 ;
							border-radius: 10rpx;
							line-height: 60rpx;
							color: #FFFFFF;
						}
					}
					.son_type_three{
						width: 100%;
						height: 800rpx;
						// background-color: #9C7EFF;
					}
				}
				.main_lists_item{
					width: 720rpx;
					height: 232rpx;
					background-color: #fff;
					margin-bottom: 0rpx;
					position: relative;
					display: flex;
					border-radius: 20rpx;
					border-bottom: 1rpx solid rgb(230, 230, 230);
					
					
					.Topping{
						width: 68rpx;
						height: 32rpx;
						font-size: 18rpx;
						border-radius: 16rpx;
						text-align: center;
						line-height: 32rpx;
						color: rgba(255, 255, 255, 1);
						background-color: #5395FF;
						z-index: 2;
						position: absolute;
						left: 24rpx;
						top: 30rpx;
					}
					.item_left{
						width: 210rpx;
						height: 200rpx;
						// border: 1px solid black;
						margin: 9rpx 0 0 16rpx;
						position: relative;
						// background-image: url(https://img.72qq.com/file/202007/24/aed12b08ae.jpg);
						// background-size: 100% 100%;
						.item_left_img{
							width: 196rpx;
							height: 196rpx;
							// background-size: cover;
							margin-top: 8rpx;
							border-radius: 8rpx;
						}
						.visits{
							width: 140rpx;
							height: 40rpx;
							// background-color: pink;
							position: absolute;
							border-radius: 20rpx;
							z-index: 33;
							top: 164rpx;
							left: 6rpx;
							font-size: 24rpx;
							display: flex;
							color: rgba(255, 255, 255, 1);
							font-weight: 300;
							.visits_img{
								margin: 0rpx 2rpx 0 2rpx;
								width: 32rpx;
								height: 38rpx;
								background: url(../../static/images/yanjin.png);
								background-size: 100% 100%;
							}
						}
					}
					.item_right{
						width: 500rpx;
						height: 230rpx;
						margin-left: 0rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						.item_right_one{
							color: #333333;
							width: 470rpx;
							height: 40rpx;
							text-indent:6rpx;
							font-size: 26rpx;
							margin-left: 10rpx;
							margin-top: 10rpx;
							font-weight: 500;
							line-height: 40rpx;
							overflow: hidden;
							// 超出出现省略号
							text-overflow: ellipsis;
							// 换行
							white-space: nowrap;
							.isspan{
								color:#005CF1 ;
							}
						}
						.item_right_two_big{
							width: 460rpx;
							height: 40rpx;
							margin:6rpx 0 4rpx 16rpx;
							display: flex;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.item_right_two{
								// font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								color: #898989;
								line-height: 40rpx;
								font-size: 22rpx;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							}
							.three_are{
								height: 40rpx;
								margin:  0 0 0 30rpx;
								font-size: 26rpx;
								background: rgba(0,162,255,0.06);
								color: #00A2FF;
								border-radius: 10rpx;
							}
						}
						
						.item_right_identifying{
							width: 470rpx;
							height: 46rpx;
							margin: 6rpx 0 2rpx 0;
							display: flex;
							// margin-top: 2rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							// border: 1px solid black;
							.item_right_identifying_item{
								height: 32rpx;
								font-size: 22rpx;
								font-weight: 400;
								line-height: 30rpx;
								padding: 5rpx 14rpx;
								margin-left: 14rpx;
								text-align: center;
								// background-color: rgba(249,189,82,0.12);
								color:#005CF1;
								border: 1px solid #005CF1;
								border-radius: 60rpx;
								// &:nth-child(1) {
								// 	background-color: rgba(249,189,82,0.12);
								// 	color:#F9BD52;
								// }
								// &:nth-child(2) {
								// 	background-color: rgba(156,126,255,0.12) ;
								// 	color:#9C7EFF ;
								// }
								// &:nth-child(3) {
								// 	background-color: rgba(63,210,140,0.12);
								// 	color:#3FD28C;
								// }
								// &:nth-child(4) {
								// 	background-color:rgba(210,63,63,0.12);
								// 	color:#D23F3F;
								// }
								// &:nth-child(5) {
								// 	background-color:rgba(79,75,255,0.12);
								// 	color:#4F4BFF;
								// }
								// &:nth-child(6) {
								// 	background-color: rgba(255,0,214,0.12);
								// 	color:#FF00D6 ;
								// }
							}
						}				
						.item_right_three{
							width: 470rpx;
							height: 60rpx;
							padding-left: 12rpx;
							margin-top: 10rpx;
							display: flex;
							justify-content: space-between;
							.three_money{
								height: 46rpx;
								line-height: 46rpx;
								font-size: 28rpx;
								padding: 0 15rpx;
								margin-top: 10rpx;
								border-radius: 30rpx;
								font-family: PingFang SC-Medium, PingFang SC;
								background-color: rgba(0, 92, 241, 0.10);
								font-weight: 600;
								color: rgba(0, 92, 241, 1) ;
								.span1{
									font-size: 24rpx;
								}
							}

							.three_time{
								width: 250rpx;
								height: 40rpx;
								font-size: 24rpx;
								font-family: PingFang SC-Regular, PingFang SC;
								font-weight: 400;
								line-height: 40rpx;
								margin-top: 14rpx;
								color: #999999;
								line-height: 40rpx;
								overflow: hidden;
							// 超出出现省略号
							// text-overflow: ellipsis;
							// 换行
								white-space: nowrap;
							}
						}
						.item_right_five{
							font-size: 12px;
							margin-left: 30rpx;
							color: rgb(163, 169, 175);
						}
					}
				}
				.main_lists_item2{
					width: 720rpx;
					height: 260rpx;
					background: url('@/static/images/indexggw1.png')no-repeat;
					background-size: 100% 100%;
				}
			}
			// 搜索店铺
			.main_listtwo{
				width: 724rpx;
				background-color: #fff;
				border-radius:  0 0 20rpx 20rpx;
				.main_twoif{
					width: 720rpx;
					height: calc(100vh - 350rpx);
					// background: url(../../static/images/kongbai3.png) no-repeat;
					// background-size: 100%;
					.img{
						width: 500rpx;
						height: 500rpx;
						margin: 0 auto;
						background: url(../../static/images/kongbai3.png) no-repeat;
						// background-size: 100%;
					}
				}
				.lists_item{
					width: 700rpx;
					height: 220rpx;
					background-color: #fff;
					margin: 0 auto;
					margin-bottom: 20rpx;
					display: flex;
					// border: 1px solid black;
					font-family: PingFang SC-Medium, PingFang SC;
					position: relative;
					border-radius: 20rpx;
					.Toppingtwo{
						width: 68rpx;
						height: 32rpx;
						font-size: 18rpx;
						border-radius: 16rpx;
						text-align: center;
						line-height: 32rpx;
						color: rgba(255, 255, 255, 1);
						background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
						border-radius: 16rpx;
						z-index: 3;
						position: absolute;
						right: 6rpx;
						top: 20rpx;
					}
					.item_left{
						width: 680rpx;
						height: 200rpx;
						// border: 1px solid black;
						// margin-left: 10rpx;
						.item_left_one{
							width: 600rpx;
							height: 60rpx;
							// background-color: pink;
							margin: 6rpx 0 0 10rpx;
							line-height: 60rpx;
							font-size: 26rpx;
							font-weight: 500;
							color: rgba(46, 46, 46, 1);
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							.isspan{
								color: rgba(0, 92, 241, 1);
							}
						}
						.item_right_identifying{
							width: 680rpx;
							height: 50rpx;
							margin: 2rpx 0 2rpx 0;
							display: flex;
							// margin-top: 2rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
							// border: 1px solid black;
							.item_right_identifying_item{
								height: 32rpx;
								font-size: 22rpx;
								font-weight: 400;
								line-height: 30rpx;
								padding: 5rpx 14rpx;
								margin-left: 14rpx;
								text-align: center;
								// background-color: rgba(249,189,82,0.12);
								color:#005CF1;
								border: 1px solid #005CF1;
								border-radius: 60rpx;
								// &:nth-child(1) {
								// 	background-color: rgba(249,189,82,0.12);
								// 	color:#F9BD52;
								// }
								// &:nth-child(2) {
								// 	background-color: rgba(156,126,255,0.12) ;
								// 	color:#9C7EFF ;
								// }
								// &:nth-child(3) {
								// 	background-color: rgba(63,210,140,0.12);
								// 	color:#3FD28C;
								// }
								// &:nth-child(4) {
								// 	background-color:rgba(210,63,63,0.12);
								// 	color:#D23F3F;
								// }
								// &:nth-child(5) {
								// 	background-color:rgba(79,75,255,0.12);
								// 	color:#4F4BFF;
								// }
								// &:nth-child(6) {
								// 	background-color: rgba(255,0,214,0.12);
								// 	color:#FF00D6 ;
								// }
								// &:nth-child(7) {
								// 	background-color: rgba(249,189,82,0.12);
								// 	color:#F9BD52;
								// }
								// &:nth-child(8) {
								// 	background-color: rgba(156,126,255,0.12) ;
								// 	color:#9C7EFF ;
								// }
								// &:nth-child(9) {
								// 	background-color: rgba(63,210,140,0.12);
								// 	color:#3FD28C;
								// }
							}
						}
						.item_left_two{
							width: 670rpx;
							height: 44rpx;
							margin: 6rpx 0 0 10rpx;
							// background-color: pink;
							line-height: 44rpx;
							font-size: 22rpx;
							font-weight: 400;
							color: rgba(0, 0, 0, 1);
						}
						.item_right_three{
							width: 670rpx;
							height: 50rpx;
							line-height: 50rpx;
							padding-left: 12rpx;
							display: flex;
							justify-content: space-between;
							.three_ipone{
								height: 50rpx;
								font-size: 22rpx;
								color: rgba(0, 0, 0, 1);
							}
							.three_time{
								width: 235rpx;
								height: 50rpx;
								font-size: 22rpx;
								color: rgba(137, 137, 137, 1);
								overflow: hidden;
							}
						}
						.hrone{
							width: 730rpx;
							height: 1rpx;
							background-color: #e9e9e9;
						}
					}
					.item_right{
						width: 200rpx;
						height: 220rpx;
						margin-left: 10rpx;
						// border: 1px solid black;
						.item_right_center{
							width: 150rpx;
							height: 56rpx;
							margin: 100rpx 0 0 20rpx;
							border-radius: 10rpx;
							background: rgba(255, 87, 51, 1);
							font-size: 28rpx;
							color: #F5F5F5;
							line-height:56rpx ;
							text-align: center;
						}
						.item_right_time{
							width: 240rpx;
							font-size: 24rpx;
							color: rgba(143, 143, 143, 1);
							margin:20rpx 0 0 -40rpx;
							text-overflow: ellipsis;
							overflow: hidden;
							white-space: nowrap;
						}
					}
				}
			}

		}

	}
	.tabbar{
		width: 100%;
		height: 120rpx;
		background-color: #F5F5F5;
		position: fixed;
		margin: 0 auto;
		bottom: 0;
		z-index: 99;
		.index_release{
			width: 680rpx;
			height: 100rpx;
			margin:  0 auto;
			margin-top: 16rpx;
			background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
		  animation: pulse 1.5s infinite;
		  transition: transform 0.3s ease;
		}
		/* 动画定义 */
		@keyframes pulse {
		  0%, 100% {
			transform: scale(1);
		  }

		  50% {
			transform: scale(1.1);
		  }
		}
	}
	// 设置滚动条的高
	.scroll-one{
		width: 100%;
		height: calc(100vh - 310rpx);
	}
	.scroll-two{
		width: 100%;
		height: calc(100vh - 230rpx);
	}
	.beian{
		height: 100rpx;
		// border: 1px solid black;
		.beianone{
			height: 50rpx;
			font-size: 12px;
			font-weight: 400;
			line-height: 50rpx;
			color: rgba(128, 128, 128, 1);
			text-align: center;
			vertical-align: top;
		}
	}
	// 设置加载中的样式
	.show_Loading{
		height: 80rpx;
		text-align: center;
		color: rgba(137, 137, 137, 1);
		// line-height: 80rpx;
	}

	// 弹出框的样式
	.popupipone{
		width: 660rpx;
		height: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		.popupipone_imgone{
			width: 400rpx;
			height: 300rpx;
			margin:  -100rpx  0 0 130rpx;
		}
		.popupipone_one{
			width: 660rpx;
			height: 70rpx;
			font-size: 40rpx;
			font-weight: 700;
			line-height: 50px;
			color: rgba(56, 56, 56, 1);
			text-align: center;
			}
		.popupipone_two{
			width: 660rpx;
			height: 50rpx;
			font-size: 26rpx;
			line-height: 20.27px;
			color: rgba(56, 56, 56, 1);
			text-align: center;
			margin: 20rpx 0 0 0 ;
		}
		.popupipone_three{
			width: 520rpx;
			height: 80rpx;
			margin: 0 auto;
			background: linear-gradient( 90deg, #5395FF 0%, #005CF1 100%);
			color: #fff;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			margin-top: 80rpx;
		}
		.popupipone_four{
			width: 520rpx;
			height: 80rpx;
			margin: 0 auto;
			background-color:#fff;
			border: 1px solid #005CF1;
			color: #005CF1;
			border-radius: 10rpx;
			text-align: center;
			line-height: 80rpx;
			margin-top: 20rpx;
		}
		.popupipone_imgtwo{
			width: 70rpx;
			height: 70rpx;
			margin: 80rpx 0 0 280rpx;
		}
	}
	.pupopimg{
		width:600rpx;
		height: 800rpx;
		background: url('@/static/images/hbtk.png') no-repeat;
		background-size: 100% 100%;
		position: relative;
		.title{
			width: 360rpx;
			height: 70rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 60rpx;
			line-height: 70rpx;
			position: absolute;
			top: 280rpx;
			left: 195rpx;
			background: linear-gradient(0deg, #ECCC99 0%, #FBE9CC 55%, #DAB984 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			// text-fill-color: transparent;	
		}
		.time{
			width: 300rpx;
			height: 62rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 44rpx;
			color: #ECCC99;
			line-height: 52rpx;
			text-align: center;
			position: absolute;
			top: 380rpx;
			left: 225rpx;
			.span1{
				color: #fff;
			}
		}
		.colse{
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 10rpx;
			left: 540rpx;
		}	
	}

</style>
